<template>
    <a-drawer popup-container="#wrap" width="100%" :footer="false" :visible="show" :ok-loading="form.loading"
        @cancel="show = false">
        <template #title>
            {{ $t('components.playback.60zelfaja300') }}
        </template>
        <div class="box">
            <div class="playback">
                <div class="track" id="track"></div>
            </div>
            <div class="footer">
                <div></div>
                <div>
                    <a-space>
                        <div style="width: 50px;display: flex;justify-content: center;">
                            <a-button shape="circle" type="primary" @click="start" v-if="play == 0">
                                <template #icon>
                                    <icon-play-arrow />
                                </template>
                            </a-button>
                            <a-button shape="circle" type="primary" @click="stop" v-if="play == 1">
                                <template #icon>
                                    <icon-pause />
                                </template>
                            </a-button>
                        </div>
                        <div style="padding: 0 10px;display: flex;align-items: center;gap: 10px;">
                            <a-slider @afterChange="change" style="width: 300px;margin-right: 30px;" :max="list?.length"
                                v-model="slider">
                                <template #mark="{ label, point }">
                                    <template v-if="point === list?.length">
                                        <strong>{{ label }}</strong>
                                    </template>
                                    <template v-else>{{ label }}</template>
                                </template>
                            </a-slider>
                            <span style="width: 50px;text-align: center;">{{ (slider / (list?.length - 1) *
                                100).toFixed(2)
                                }}%</span>
                            <span>/</span>
                            <span style="width: 50px;text-align: center;">100.00%</span>
                        </div>
                    </a-space>
                </div>
                <div style="display: flex;justify-content: end;">
                    <a-button type="primary" @click="show = false">{{ $t('components.playback.60zelfajbcg0')
                        }}</a-button>
                </div>
            </div>
        </div>
    </a-drawer>
</template>

<script lang='ts' setup>
import { Scene, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { apiSpectTrack } from '@/api/index'
import dayjs from 'dayjs'
const show = defineModel('show', { default: false })
const detail: any = defineModel('data', { default: {} })
const emit = defineEmits(['refresh'])
const local = useLocal()
const form = reactive({
    loading: false,
    mounted: false,
    data: {} as any,
    points: [] as any
})
const getData = async () => {
    // let arr = [[121.4705, 31.3967]];
    // for (let i = 1; i < 50; i++) {
    //     arr = [...arr, useGenerateRandomLatLonWithinDistance(arr[arr.length - 1], 20)]
    // }
    form.loading = true
    const { code, data } = await apiSpectTrack({
        deviceId: form.data.uavBasic.id,
        // startTime: Number(dayjs().subtract(7, 'day').format('X')),
        startTime: 1722307996,
        endTime: Number(dayjs().format('X')),
    })
    form.loading = false
    if (code != 200) return
    form.points = data.points
    // form.points = arr
    nextTick(() => {
        init()
    })
}
const play = ref(0)
const slider = ref(0)
const scene = ref()
const marker = ref()
const speed = computed(() => 100)
const list = computed(() => form.points?.filter((item: any) => !!item[0]))
const operatorPointLayer = ref()
//无人机操作人员定位操作
const createOperatorPointLayer = () => {
    operatorPointLayer.value = new PointLayer({
        zIndex: 2,
    }).source(
        [
            {
                lng: detail.value.uavOperatorInfo.lon,
                lat: detail.value.uavOperatorInfo.lat
            }
        ]
        , {
            parser: {
                type: 'json',
                x: 'lng',
                y: 'lat',
                zoomOffset: 1,
            },
        })
        .shape('01')
        .size(20);
    scene.value.addLayer(operatorPointLayer.value)
}
const init = () => {
    destroy()
    scene.value = new Scene({
        id: 'track',
        map: new GaodeMap({
            style: 'normal',
            token: local.mapKey.aMap,
            zoom: 2,
            plugin: ['AMap.MoveAnimation', 'AMap.Polyline'],
        }),
        logoVisible: false,
    });
    scene.value.addImage(
        '01',
        '/pilot.svg',
    );
    scene.value?.on('loaded', () => {
        createOperatorPointLayer();
        (window as any).AMap.plugin(['AMap.MoveAnimation', 'AMap.Polyline', 'AMap.Size'], () => {
            // @ts-ignore
            let icon = new AMap.Icon({
                // @ts-ignore
                size: new AMap.Size(40, 40),
                image: '/spect.svg',
                // @ts-ignore
                imageSize: new AMap.Size(40, 40),
            });
            // @ts-ignore
            marker.value = new AMap.Marker({
                map: scene.value.map,
                position: list.value[0],
                icon,
            });
            // 绘制轨迹
            // @ts-ignore
            let polyline = new AMap.Polyline({
                 // @ts-ignore
                map: scene.value.map,
                path: list.value,
                showDir: true,
                strokeColor: "#28F",  //线颜色
                strokeWeight: 6,      //线宽
            });
            scene.value.map.setFitView();
            play.value = 0
        })
    })
}

let timer: any = null
const start = () => {
    play.value = 1
    timer = setInterval(() => {
        slider.value++
        marker.value.moveTo(list.value[slider.value])
        scene.value.setCenter(list.value[slider.value], true)
        if (slider.value == (list.value?.length - 1)) {
            slider.value = 0
            return stop()
        }
    }, speed.value)
}
const stop = () => {
    clearInterval(timer)
    timer = null
    play.value = 0
}
const change = (value: any) => {
    marker.value.moveTo(list.value[value - 1])
    scene.value.setCenter(list.value[value - 1], true)
}
useWatch(show, (val: boolean) => {
    if (val) {
        form.data = {
            ...detail.value
        }
        getData()
    } else {
        slider.value = 0
        stop()
        destroy()
        setTimeout(() => {
            form.mounted = false
            nextTick(() => {
                form.mounted = true
            })
        }, 500);
    }
})
const destroy = () => {
    scene.value && scene.value?.destroy()
    scene.value = null;
}
onBeforeUnmount(() => {
    destroy()
})
</script>
<style lang="less" scoped>
.box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .playback {
        flex: 1;

        .track {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: 5px;
            overflow: hidden;
        }
    }

    .footer {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding-top: 16px;

        >div {
            &:first-of-type {
                width: 20%;
            }

            &:nth-of-type(2) {
                width: 80%;
                display: flex;
                justify-content: center;
            }

            &:last-of-type {
                width: 20%;
            }
        }
    }
}
</style>